<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
    <script src="./js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
    <h1  :style="{opacity:opacity}">vue透明度变化</h1>
    <button @click="stop">点我停止变化</button>
  <h2 >{{n}}</h2>
    </div>
<script>
// mounted Vue将模板解析，并将初始的真实DOM元素放在页面后（挂载完毕后执行）
// 对DOM的操作均真实有效，一般在此进行:开启定时器，发送网络请求，订阅消息，绑定自定义事件
//Vue.config.productionTip=false //阻止vue在启动时生成生产提示
//beforeCreate 无法通过vm访问到data中的数据，methods中的方法
//created  可以通过vm访问到data中的数据，以及methods中的方法
//beforeMount  未经vue编译的DOM结构，最终对dom的操作都不奏效。
//beforeUpdate  data中的数据发生改变时执行，此时数据是新的，但是页面是旧的。
//updated   数据和页面保持同步 都是新的。
//beforeDestory  ,vm处于可用状态，一般在这里进行，关闭定时器，取消订阅消息，解绑自定义事件。对数据的更新不会在执行！

    const vm=new Vue({
    el: '#root',
    data: {
        opacity:1,
        n:1
    },
    methods:{
        stop(){
            this.$destroy();
        }
    },
    //
    mounted() {
      this.timer=setInterval(()=>{
      vm.opacity-=0.01
      if(vm.opacity<=0){vm.opacity=1} 
      console.log("定时器变化")
      
    },16)
    },
    beforeCreate() {
        console.log("beforeCreated");  
    
    console.log("After debugger statement"); 
    },

    beforeMount() {
        console.log("beforeMount")
    },
    
    beforeDestroy() {
        //善后工作
        clearInterval(this.timer);
    },
    }
    )


</script>
  
</body>
</html>